<html>
<head>
<script src="jquery.js"></script>
<script src="jquery.deselectableRadio.js"></script>
<script>
$(document).ready(function() {
    $('input[name="test"], input[name="test3"]').deselectable();
    $('input#3').deselectable();

    // set test4's orange using js
    $('#orange2').attr("checked", true);

    $('input[name="test"]').change(function() {
        if ($(this).is(":checked")) {
            $('#test_value').text(this.value);
        } else {
            $('#test_value').text('-');
        }
    });

    // create some radios on the fly
    var test4_values = ["banana", "grape", "durian"];
    var some_div = $('<div>');
    for (var i in test4_values) {
        var fruit = test4_values[i];
        var radio = $('<input>').attr({type: "radio", name: "test4", value: fruit, id: fruit});
        var label = $('<label>').attr("for", fruit).text(fruit);
        some_div.append(radio).append(label).append("<br/>");
    }
    $('input[type="radio"]', some_div).deselectable();
    $('body').append(some_div);
});
</script>
</head>
<body>
<p>All buttons in the following group should be deselectable:</p>
<input type="radio" name="test" value="a" id="a" /> <label for="a">A</labeL><br />
<input type="radio" name="test" value="b" id="b" /> <label for="b">B</label><br />
<input type="radio" name="test" value="c" id="c" /> <label for="c">C</labeL><br />
<p>Currently selected value: <span id="test_value">-</span></p>
<hr />
<p>Only the last button in the following group should be deselectable:</p>
<input type="radio" name="test2" value="1" id="1" /> <label for="1">1</labeL><br />
<input type="radio" name="test2" value="2" id="2" /> <label for="2">2</label><br />
<input type="radio" name="test2" value="3" id="3" /> <label for="3">3</labeL><br />
<hr />
<p>The selected button, orange, should be deselectable:</p>
<input type="radio" name="test3" value="apple" id="apple" /> <label for="apple">apple</labeL><br />
<input type="radio" name="test3" value="orange" id="orange" checked="checked" /> <label for="orange">orange</label><br />
<input type="radio" name="test3" value="pear" id="pear" /> <label for="pear">pear</labeL><br />
<hr />
<p>The following dynamically generated buttons should also be deselectable:</p>
</body>
</html>
